import logoSvg from '@assets/images/share-top-logo.svg';

import {localStore} from "../../../Store/localStore";

export function render(selectedItem, menuItems) {
    const menuItemsHtml = menuItems.map(item => {

        const sign = localStore.get("token") ? true : false;
        const isLogin = item.isLogin;

        const isSelected = selectedItem === item.value;
        const iconName = isSelected ? item.iconFill : item.icon;


        if(sign){ //登录的话全部都显示
            return `
                <div class="menu-item ${isSelected ? 'selected' : ''}" data-value="${item.value}">
                    <sl-icon name="${iconName}" class="menu-icon"></sl-icon>
                    <a href="${item.href}" class="menu-text">${item.label}</a>
                </div>
            `;
        }

        if(!isLogin){//没有登录也能看到的侧边栏 菜单
            return `
                <div class="menu-item ${isSelected ? 'selected' : ''}" data-value="${item.value}">
                    <sl-icon name="${iconName}" class="menu-icon"></sl-icon>
                    <span class="menu-text">${item.label}</span>
                </div>
            `;
        }

        return '';
    }).join('');

    return `
        <div class="left-menu">
            <div class="logo" style="height:76px;">
                <img src="${logoSvg}" alt="Share Top Logo" class="logo-image" />
            </div>
            <div class="menu-content">
                ${menuItemsHtml}
            </div>
        </div>
    `;
}